<template>
  <div class="userbrowsehistory-container nav-bar-top">
    <van-nav-bar class="nav-bar" title="浏览历史" left-arrow @click-left="$router.back()"/>
    <van-list
      class="goods-list"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad">
      <div class="order-goods-list circle-bg" v-for="(goods, index) in goodsList" :key="index">
        <div class="goods-sel" v-if="editFlag">
          <van-checkbox></van-checkbox>
        </div>
        <div class="order-goods-item">
          <van-image class="goods-img" width="65" height="65" fit="container" src="https://api.7wpp.com/uploads/20200930/78d480fa1025394b9be24ef5eef17489.png" />
          <div class="goods">
            <span class="title van-multi-ellipsis--l2">Dior迪奥气垫BB霜梦幻美肌修颜霜15g遮瑕裸妆正品迪奥气垫迪奥气垫迪奥气垫迪奥气垫</span>
            <div class="price">
              <span><em>¥</em>22.00</span>
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import goodsItem from '@/components/goods/goodsItem';

export default {
  components: {
    goodsItem
  },
  name: 'userBrowseHistory',
  data () {
    return {
      editFlag: false,
      loading: false,
      finished: false,
      goodsList: []
    }
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.goodsList.push({});
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.goodsList.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    }
  }
}
</script>

<style lang="scss">
.userbrowsehistory-container{
  padding-top: 5px;
  .order-goods-list{
    border-bottom: 2px solid #f6f6f6;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 10px 20px 10px 15px;
    .goods-sel{
      display: flex;
      justify-content: center;
      width: 40px;
      margin: 0px 10px 0px 0px;
    }
    .price{
      margin-top: 3px;
    }
  }
}
</style>
